<template>
  <view class="content-box">
    <view class="list-box">
      <u-swipe-action>
        <u-swipe-action-item
          :options="options"
          :show="item.show" 
          v-for="(item, index) in list"
          :disabled="item.disabled"
          :key="index"
          @click="swiperClick(item, index)"
        >
          <view
            class="swipe-action"
            @touchend="touchend"
            @touchmove="touchmove"
            @touchstart="touchstart"
            :class="[index === list.length - 1 && 'u-border-bottom-none']"
          >
            <view class="swipe-action__content">
              <image 
                :src="item.userVo.avatarCompress || item.userVo.avatar" 
                class="avator"
                mode="aspectFill"
                v-if="isPeopleAvatarExit(item.userVo.avatarCompress || item.userVo.avatar)"></image>
              <view
                v-else
                class="avator avator-font-setting"
                :style="{ background: `${getDefaultColor(item.userVo.avatarColorCode)}`, fontSize: '30upx', fontWeight: '400' }"
                >{{ formatUserName(item.userVo).slice(0, 1) }}</view
              >
              <text class="user-name">{{ formatUserName(item.userVo) }}</text>
            </view>
            <view
              class="iconfont icon-shixinshanjian"
              @click="rescind(item, index)"
              v-if="editShow"
            ></view>
          </view>
          <view class="line"></view>
        </u-swipe-action-item>
      </u-swipe-action>
    </view>
  </view>
</template>

<script>
import { formatUserName } from '../../../utils';
import { getDefaultColor } from "@/utils/index.js";
export default {
  props: ["list", "editShow", "options"],
  data() {
    return {};
  },
  watch: {
  },
  methods: {
    getDefaultColor,
    // 操作菜单
    swiperClick(item, index) {
      console.log(item)
      this.$emit("rescind", item, index);
    },
    // 解除
    rescind(item, index) {
      this.$emit("rescind", item, index);
    },
    // 触摸结束
    touchend() {
      this.$emit("touchend");
    },
    // 移动中
    touchmove(e) {
      var touch = e.changedTouches[0];
      this.$emit("touchmove", touch.pageX);
    },
    // 触摸结束
    touchstart(e) {
      var touch = e.changedTouches[0];
      const startX = touch.pageX; //记录开始滑动位置
      this.$emit("touchstart", startX);
    },
  },
};
</script>

<style lang="scss" scoped>
.content-box {
  width: 100%;
  box-sizing: border-box;
  padding: 0 0 0 30rpx;
  background: #fff;
  .swipe-action {
    // height: 160rpx;
    // line-height: 160rpx;
    // border-bottom: 2rpx solid #f6f6f6;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .line{
    // width: 100%;
    // height: 2rpx;
    // box-sizing: border-box;
    // padding: 0 30rpx;
    // background: #f6f6f6;
  }
  .u-page {
    padding: 0;
  }
  .u-border-bottom-none {
    border-bottom: none;
  }
  .icon-shixinshanjian {
    padding-right: 30rpx;
    color: #fe6600;
    font-size: 22px;
  }
  .swipe-action__content {
    width: 100%;
    display: flex;
    align-items: center;
    height: 120rpx;
    line-height: 120rpx;
    background: #FFF;
    .avator {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      background: #f6f6f6;
      margin-right: 33rpx;
      text-align: center;
			line-height: 80rpx;
			font-size: 30upx;
			font-weight: 400;
			color: #ffffff;
    }
    .user-name {
      font-size: 30rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #000000;
    }
  }
}
</style>